<template>
	<!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
	<u-tabbar v-model="val" :list="list" :mid-button="false" :active-color="activeColor"></u-tabbar>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			val: 1,
			// 激活时的演示，包括字体图标，提示文字等的演示
			activeColor: '#ff9900',
			list: [
				{
					iconPath: 'home',
					selectedIconPath: 'home-fill',
					text: '首页',
					pagePath: '/pages/index/index'
				},
				{
					iconPath: 'grid',
					selectedIconPath: 'grid-fill',
					text: '订单',
					pagePath: '/pages/order/index'
				},
				{
					iconPath: 'account',
					selectedIconPath: 'account-fill',
					text: '我的',
					pagePath: '/pages/my/index'
				}
			]
		}
	},
	computed: {
		...mapState('common', ['tabbarValue'])
	},
	watch: {
		tabbarValue(val) {
			this.val = this.tabbarValue || 0
		}
	},
	created() {
		uni.hideTabBar()
		this.val = this.tabbarValue
	},

	methods: {
		...mapMutations('common', ['SET_TABBARVALUE']),
		onChange(val) {
			this.SET_TABBARVALUE(val)
			if (val === 0) {
				uni.switchTab({
					url: '/pages/index/index'
				})
			} else if (val === 1) {
				uni.switchTab({
					url: '/pages/order/index'
				})
			} else {
				uni.switchTab({
					url: '/pages/my/index'
				})
			}
		}
	}
}
</script>

<style scoped></style>
